/* eslint-disable */
import React, { Component } from 'react';
import styles from './index.less';
import { Popover } from 'antd';
import MyIcon from '../../common/MyIcon';
import Animation from '../../common/Animation';
import _ from 'lodash';

/**
 * 驾驶舱中地图上方的菜单按钮 -> 切换地图标记类型
 * list --->
 * [{
 *  name: '',     名称
 *  icon: '',     图标
 *  handleClick: '',   点击事件 返回三个参数 (是否选中, 选中的文本, 选中的索引)
 *  selected: '', 是否选中
 * }]
 */
class CockpitMenuButton extends Component{

  static defaultProps = {
    text: '',               // 按钮上的文本
    selected: false,        // 是否选中
    list: [],               // 图标列表
  }

  state = {
    isShowList: false,      // 是否展示图标列表
    selected: false,
  }

  componentDidMount() {
    this.setState({
      selected: this.props.selected
    })
  }

  componentWillReceiveProps(nProps) {
    if(!_.isEqual(this.props, nProps)) {
      this.setState({
        selected: nProps.selected
      })
    }
  }

  // 获取图标列表
  getList = () => {
    const { list } = this.props;

    return (
      <ul className={"icon-list-warpper"}>
        {
          (list || []).map((m, i) => this.getSmallButton(m, i))
        }
      </ul>
    )
  }

  // 图标按钮
  getSmallButton = (m, i) => {
    const { name, icon, handleClick } = m;

    const onClick = () => {
      m.selected = !m.selected;
      handleClick && handleClick(m.selected, m.name, i);
      this.setState({});
    }

    return (
      <li className={"small-button" + ' ' + (m.selected ? "selected" : '') } key={i} onClick={onClick}>
        <div><MyIcon type={icon} /></div>
        <div className="name">{name}</div>
        { this.getCornor("left-top") }
        { this.getCornor("left-bottom") }
        { this.getCornor("right-top") }
        { this.getCornor("right-bottom") }
        <div className={"line"}></div>
      </li>
    )
  }

  // 按钮点击事件
  toggleList = () => {
    this.setState({
      isShowList: !this.state.isShowList,
      selected: !this.state.selected
    })
  }

  // 边角
  getCornor = (className) => {
    return (
      <div 
        className={ "cockpit-menu-cornor" + ' ' + styles["cockpit-menu-cornor"] + ' ' + styles[className] + ' ' + className}
      >
      </div>
    )
  }

  getBigButton = () => {
    const { isShowList, selected } = this.state;
    const { text, list, onClick } = this.props;

    let children = (
      <div onClick={() => onClick && onClick(text)} className={styles["menu-button"] + ' ' + (selected ? styles["selected"] : '') }>
        {text}
        { this.getCornor("left-top") }
        { this.getCornor("left-bottom") }
        { this.getCornor("right-top") }
        { this.getCornor("right-bottom") }
      </div>
    )

    if(list && list.length) {
      return (
        <Popover
          overlayClassName={"cockpit-menu-botton-popover"}
          content={this.getList()}
          placement="top"
          trigger="hover"
          // visible={isShowList}
          // onVisibleChange={this.toggleList}
        >
          { children }
        </Popover>
      )
    }
    return children
  }

  render() {
    const { className, style } = this.props;
    return (
      <Animation className="bounceInUp">
        <div className={styles["cockpit-menu-button-wrapper"] + ' ' + className} style={style}>
          { this.getBigButton() }
        </div>
      </Animation>
    )
  }

}

export default CockpitMenuButton